<template>
  <div class="user-container">
    <p class="common-list-bread">试验人员</p>
    <div class="common-query-box">
      <el-form :inline="true"  labelWidth="75px">
        <el-form-item label="名称：">
             <el-input v-model="name"  placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="代号：">
             <el-input v-model="code"  placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="类别：">
          <el-select v-model="resourceCategoryId"  placeholder="请选择" clearable filterable :popper-append-to-body="false" >
            <el-option v-for="(item,idx) in categoryList"
            :key="idx" :label="item.name"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签：">
          <el-select v-model="resourceTagName" clearable placeholder="请选择" filterable :popper-append-to-body="false" >
            <el-option label="全部" :value=null></el-option>
            <el-option v-for="(item,idx) in tagList"
            :key="idx" :label="item.name"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="availableType" clearable placeholder="请选择" filterable :popper-append-to-body="false" >
            <el-option label="全部" :value=null></el-option>
            <el-option v-for="(item,idx) in stateList"
            :key="idx" :label="item.name"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作状态：">
          <el-select v-model="workStatus" clearable placeholder="请选择" filterable :popper-append-to-body="false" >
            <el-option label="全部" :value=null></el-option>
            <el-option v-for="(item,idx) in workList"
            :key="idx" :label="item.name"
            :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
            <el-button class="common-btn-primary left" size="small" @click="asyncGetTableData">查询</el-button>
            <el-button class="common-btn-solid" size="small" @click="onClickRest">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="common-table-box">
      <div class="common-table-btn-box">
        <el-button  class="common-btn-primary" size="small" @click="onclickAdd">添加人员</el-button>
      </div>
      <el-table :data="tableData" border >
         <el-table-column label="ID" width="110"  prop="id" align="center"></el-table-column>
        <el-table-column prop="name" label="名称" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="code" label="代号" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="resourceCategoryName" label="类别" min-width="100" align="center">
        </el-table-column>
        <el-table-column prop="resourceTagNames" label="能力标签" max-width="100" align="center">
        </el-table-column>
        <el-table-column  label="可用状态" max-width="100" align="center">
          <template slot-scope="scope">
            {{availableTypeName[scope.row.availableType]}}
          </template>
        </el-table-column>
        <el-table-column  label="工作状态" max-width="100" align="center">
          <template slot-scope="scope">
            {{workStatusName[scope.row.workStatus]}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope"><!-- v-has="'APM_edit'" -->
            <el-button  class="common-btn-text" @click="onClickCheck(scope.row.id)"><i class="icon-ali-chakan"></i>查看</el-button>
            <el-button  class="common-btn-text" @click="onClickEdit(scope.row.id)"><i class="icon-ali-bianji"></i>编辑</el-button>
            <el-button  class="common-btn-text" @click="onClickCopy(scope.row.id)"><i class="icon-ali-fuzhi icon-copy-text"></i>复制</el-button>
            <el-button  class="common-btn-text " @click="onClickDelete(scope.row)">
              <i class="icon-ali-shanchu"></i>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="currentPageChange"
        :current-page="currentPage"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
   
  </div>
</template>

<script>

  export default {
    
    data() {
      return {
        currentPage: 1,
        pageSize: 100,
        total: 0,

        name: '',  //类别名称  
        code: '', //类别代号  
        resourceCategoryId: '',  //类别id
        resourceTagName: '',  //标签
        availableType: '',  //是否可用状态
        availableType: '',  //是否可用状态
        workStatus: '',  //工作状态
        workList: [{//工作状态集合
            id:1,
            name:'工作中'
          },
          {
            id:2,
            name:'已预订'
          },
          {
            id:2,
            name:'空闲'
          }],//工作状态
        stateList: [//是否可用（1=是 2=否）
          {
            id:1,
            name:'是'
          },
          {
            id:2,
            name:'否'
          }
        ],
        categoryList: [],//类别集合 
              
        tagList: [],    //标签集合
        tableData: [],    //表格数据


        userId: '',
        availableTypeName: {'1':'是','2':'否'}, 
        workStatusName: {'1':'工作中','2':'已预订','3':'空闲'},

      }
    },
    created() {
     
      /* this.asyncGetTagList();
      this.asyncGetMachineTypeList();*/
      this.asyncGetTableData(); 
      
    },
   
    methods: {
      
      //获取列表数据???
      asyncGetTableData() {
        this.$axios.get("/resourcecategory/listResourceCategory", {
          params: {
            pageSize: this.pageSize,
            pageNum: this.currentPage,
            name: this.name,
            code: this.code,
            resourceType: 1,
            resourceTagName: this.resourceTagName,
            resourceCategoryId: this.resourceCategoryId,
            availableType: this.availableType,
            workStatus: this.workStatus,
          }
        }).then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            this.tableData = res.data.data.list || [];
            this.total = res.data.data.total;
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //重置
      onClickRest(){
        this.resourceCategoryId= '';  
        this.resourceTagName= ''; 
        this.availableType= '';  
        this.name= '';  
        this.code= '';  
        this.workStatus= '';
        this.pageSize = 10;
        this.currentPage = 1;
        this.asyncGetTableData();
      },
      //获取类别集合
      asyncGetMachineTypeList() { 
        this.$axios.get("/baseresource/getResourceCategoryListByType?resourceType=1").then((res) => {
          if (res.data.code === 200) {
            this.categoryList = [...res.data.data];
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //获取标签下拉框数据???
      asyncGetTagList() {
        this.$axios.get("/resourcecategory/listResourceTag?resourceType=1").then((res) => {
          if (res.data.code === 200) {
            this.tagList = [...res.data.data];
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      
      //点击添加人员
      onclickAdd() {
       this.$router.push({
          path: '/experimentsPersonnel/add'
                    // path: '/experimentsPersonnel/action/check',


          /* ,
          query: {
            currentTabId: this.currentTabId
          } */
        })
      },
      //复制类别
      onClickCopy(id) {  
       this.$router.push({
          path: '/experimentsPersonnel/copy',
          query: {
            currentTabId: this.currentTabId
          } 
        })
      },
      //查看
      onClickCheck(id) {
       this.$router.push({
          path: '/experimentsPersonnel/action/check',
          query: {
            currentTabId: id
          }
        })
      },
      //编辑
      onClickEdit(id) {
       this.$router.push({
         path: '/experimentsPersonnel/edit',
          query: {
            currentTabId: id
          }
        })
      },
      //删除???
      onClickDelete(row) {
        this.$confirm("确定删除此数据吗？", "删除确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          showClose: false,
          type: "warning",
          center: true,
          customClass: "common-confirm-box",
          confirmButtonClass: "common-btn-primary",
          cancelButtonClass: "common-btn-text",
        }).then(() => {
          this.confirmDelete(row.id);
        });
      },
      //二次确认删除
      confirmDelete(id) {
        this.$axios
          .get("/baseresource/deleteBaseResourceById?id=" + id)
          .then((res) => {
            if (res.data.code === 200) {
               this.asyncGetTableData();
            } else {
              this.$message.error(res.data.msg);
            }
          });
      },
      pageSizeChange(val) {
        this.pageSize = val;
        this.asyncGetTableData();
      },
        
      currentPageChange(val) {
        this.currentPage = val;
        this.asyncGetTableData();
      }
    }
  }
</script>
<style scoped>
.left{
  margin-left: 15px;
}
    .aircraft-list {
        border: 1px solid #C9C9D3;
        margin: 10px 0;
    }
    .aircraft-list-row {
        display: flex;
        padding: 13px 0 13px 10px;
        border-bottom: 1px solid #C9C9D3;
    }
    .aircraft-list-row.active {
        align-items: center;
        justify-content: center;
        color: #ccc;
    }
    .aircraft-list-row:last-child {
        border-bottom: none;
    }
    .list-row-item {
        flex: 1;
        cursor: pointer;
    }
    .list-row-item:hover {
        text-decoration: underline;
        color: var(--color-blue-main);
    }
</style>
